<!DOCTYPE html>
<!-- saved from url=(0034)http://127.0.0.1:5000/house/111872 -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>爱租屋</title>

    <link rel="icon" href="../static/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="../static/img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap core CSS -->
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/clean-blog.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>

        #mainnav {
            border-bottom: 1px solid #ecf0f1;
            background-color: #ecf0f1;
        }

        #mainNav {
            border-bottom: 1px solid #ecf0f1;
            background: transparent;
        }

        #mainNav .navbar-brand {
            padding: 10px 20px;
            color: #343a40;
        }

        #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
            color: #0085A1;
        }

        #mainNav .navbar-nav > li.nav-item > a {
            padding: 10px 20px;
            color: #343a40;
        }

        #mainNav .navbar-nav > li.nav-item > a:focus, #mainNav .navbar-nav > li.nav-item > a:hover {
            color: #0085A1;
        }

        header.masthead {
            margin-bottom: 50px;
            background: no-repeat center center;
            background-color: #fff;
            background-attachment: scroll;
            position: relative;
            background-size: cover;
        }

        header.masthead .overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: #fff;
            opacity: 0.5;
        }

        .course {
            margin-top: 10px;
            padding: 7px 5px 0 5px;
            background: #fff;
        }

        /*本页的内容*/
        .no-margin-bottom {
            margin-bottom: 0 !important;
        }

        .detail-body {
            background: #fff;
            margin-top: 100px;

        }

        .info-line {
            margin: 10px 0 35px 0;
        }

        .house-info {
            padding: 20px 0 20px 0;
            font-size: 20px;
            color: #e74c3c;
        }

        .detail-header {
            margin: 50px 0 10px;
        }

        .describe {
            font-size: 15px;
            color: #bdc3c7;
        }

        /* 二级标题 */
        .attribute-header {
            padding: 30px 0 10px 0;
            margin-bottom: 5px;
            font-size: 22px;
            font-weight: 500;
            border-bottom: #ecf0f1 1px solid;
        }

        .attribute-header .attribute-header-tip-line {
            font-size: 14px;
            color: #a4b0be;
            font-weight: 300;
            line-height: 25px;
        }

        /* 属性 */
        .attribute-info {
            /*border-bottom: #ecf0f1 1px solid;*/
            padding: 20px;
        }

        .attribute-text {
            font-size: 14px;
            color: #a4b0be;
            font-weight: 300;
            line-height: 25px;
            text-align: justify;
        }

        .info-text {
            font-size: 14px;
            color: #555;
            font-weight: 400;
            line-height: 40px;
            text-align: justify;
        }

        .collection {
            margin-left: 420px;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #ecf0f1;
            display: inline-block;
            position: relative;
        }

        .collection:hover {
            background-color: #f1c40f;
            border: 0.5px solid #ecf0f1;

        }

        .collection i {
            color: #f1c40f;
            padding: 5px 10px;
        }

        .collection:hover i {
            color: #fff;
        }

        /* 配套设施 */
        .icon-1 {
            width: 28px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/bx.png') no-repeat;
            display: block;
        }

        .icon-2 {
            width: 36px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/xyj.png') no-repeat;
            display: block;
        }

        .icon-3 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/ds.png') no-repeat;
            display: block;
        }

        .icon-4 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/kt.png') no-repeat;
            display: block;
        }

        .icon-5 {
            width: 28px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/nq.png') no-repeat;
            display: block;
        }

        .icon-6 {
            width: 46px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/rsq.png') no-repeat;
            display: block;
        }

        .icon-7 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/trq.png') no-repeat;
            display: block;
        }

        .icon-8 {
            width: 48px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/chuang.png') no-repeat;
            display: block;
        }

        .icon-9 {
            width: 46px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/wifi.png') no-repeat;
            display: block;
        }

        .icon-10 {
            width: 46px;
            height: 45px;
            margin: 0 auto 5px;
            background: url('/static/img/dt.png') no-repeat;
            display: block;
        }

        .attribute-text-sm {
            font-size: 14px;
            color: #a4b0be;
            font-weight: 300;
            line-height: 25px;
            text-align: center;
            margin: 0 auto;
            display: block;
        }

        /* recommend */

        .recommend {
            margin-top: 5px;
            padding-top: 27px;
        }

        .recommend-info span {
            font-size: 14px;
            color: #555;
            font-weight: 400;
            line-height: 20px;
            text-align: justify;
        }

        .recommend-info1 {
            height: 20px;
            font-weight: 300;
            font-size: 13px;
        }

        /* side data */
        #pie {
            height: 290px;
        }

        #f_line {
            height: 290px;
        }

        #scolumn_line {
            height: 380px;
        }

        #broken_line {
            height: 340px;
        }

        .self-no-padding {
            padding: 0;
        }

        /* login */
        .m-header {
            padding: 10px 16px 2px;
        }

        .login_form {
            margin-top: 150px;
            z-index：999;
        }

        .form-info {
            font-size: 18px;
            color: #2c3e50;
        }

        .switch-info {
            font-size: 14px;
            color: #2c3e50;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 2px;
        }

        .rent-btn {
    margin-left: 20px; /* 价格与租房按钮间距 */
    padding: 5px 12px;
    border: 2px solid #0085A1; /* 蓝色边框 */
    border-radius: 4px;
    color: #0085A1;
    cursor: pointer;
    transition: all 0.3s; /* 过渡动画 */
}

.rent-btn:hover {
    background-color: #0085A1;
    color: white;
}

/* 弹窗样式 */
.modal {
    display: none; /* 隐藏弹窗 */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    position: relative;
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    animation-name: modalFade;
    animation-duration: 0.3s;
}

@keyframes modalFade {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.modal-body {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #555;
}

.modal-footer {
    text-align: center;
}

.submit-btn {
    padding: 10px 20px;
    background-color: #0085A1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #006685;
}
  /* 图标容器样式 */
    .facility-icon {
        margin-bottom: 8px;
        transition: all 0.3s ease;
    }

    /* 有该设施时的图标颜色 */
    .facility-available {
        color: #0085A1;
    }

    /* 无该设施时的图标颜色 */
    .facility-unavailable {
        color: #bdc3c7;
    }

    /* 图标悬停效果 */
    .facility-icon:hover {
        transform: scale(1.1);
    }

    /* 设施文字描述 */
    .facility-text {
        font-size: 14px;
        margin-top: 5px;
        display: block;
    }

    /* 收藏按钮样式优化 */
    .collection i {
        transition: all 0.3s ease;
    }

    .collection:hover i {
        transform: scale(1.1);
    }

    /* 已收藏状态 */
    .collected i {
        color: #ff4444 !important;
    }
/* 新增或修改的CSS样式 */
.price-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: auto; /* 确保价格和按钮组之间有足够空间 */
}

.house-info {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* 卡片阴影和悬停效果优化 */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.03);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* 按钮样式优化 */
.rent-btn {
    padding: 8px 20px;
    background-color: #0085A1;
    color: white;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s;
    border: none;
    white-space: nowrap;
}

.rent-btn:hover {
    background-color: #006685;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 133, 161, 0.2);
}

.collection {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 8px 15px;
    transition: all 0.3s;
    border: none;
}

.collection:hover {
    background-color: #f1c40f;
}

.collection i {
    color: #555;
    transition: all 0.3s;
}

.collection:hover i {
    color: white;
}

.collected {
    background-color: #ff4444;
}

.collected i {
    color: white !important;
}

/* 设施图标布局优化 */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    padding: 15px 0;
}

.facility-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s;
}

.facility-item:hover {
    background-color: #f8f9fa;
    transform: translateY(-3px);
}

/* 图表容器优化 */
.chart-container {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

    </style>

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="http://127.0.0.1:5000/">爱租屋</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">

            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://127.0.0.1:5000/">首页</a>
                </li>


                {% if request.cookies.get('is_logged_in') == 'true' %}
                <li class="nav-item" id="user">
                <!-- 登录状态显示用户菜单 -->
                    <a class="nav-link" href="#">{{ request.cookies.get('username') }}</a>
                </li>
                <li class="nav-item" id="user">
                    <a class="nav-link" href="/user/{{ request.cookies.get('username') }}">个人中心</a>
                </li>
                <li class="nav-item" id="user">
                    <a class="nav-link" href="/logout">注销</a>
                </li>
            {% else %}
                <li class="nav-item" id="user">
                    <!-- 未登录显示登录按钮 -->
                    <a class="nav-link" data-toggle="modal" data-target="#login" href="#">
                        <i class="fas fa-sign-in-alt"></i> 登录
                    </a>
                </li>
            {% endif %}


            </ul>
        </div>
    </div>
</nav>

<!-- Page Header -->
<header class="masthead no-margin-bottom" style="background-color: #fff">
    <div class="overlay"></div>
    <div class="container">


        <!--内容-->
        <div class="row">
            <div class="col-lg-12 col-md-12 mx-auto detail-body">
                <div class="row info-line">
                    <!--大标题-->
                    <div class="col-lg-12 col-md-12 detail-header">
                        <h3>{{ house.address }}&nbsp;{{ house.rooms }}</h3>
                        <div class="describe">
                            <span>为您精准定位，当前城市房源信息</span>
                        </div>
                    </div>
                    <!--左详情-->

<div class="col-lg-8 col-md-8">
    <div class="course">
        <div class="card">
        <!--图-->
        <div class="mb-4">
            <a href="#">
                <img class="img-fluid rounded shadow-sm" src="/static/img/house-bg1.jpg" alt="">
            </a>
        </div>

        <!--价格和按钮-->
<div class="house-info d-flex justify-content-between align-items-center mb-4">
    <div class="price-container">
        <span class="price h3 font-weight-bold text-danger">￥{{ house.price }}/月</span>
        <div>
        <span class="collection ml-3" id="btn-collection">
            <a><i class="fa fa-heart" aria-hidden="true"> 收藏</i></a>
        </span>

        <span class="rent-btn ml-3" id="rentbtn">立即预约</span>
            </div>
    </div>
</div>
</div>
        <!--基本信息-->
        <div class="card mb-4 border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h4 class="mb-0 font-weight-bold">基本信息</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <!--左侧属性-->
                    <div class="col-md-6">
                        <div class="attribute-item mb-3">
                            <span class="text-muted small">房屋户型：</span>
                            <span class="font-weight-medium">{{ house.rooms }}</span>
                        </div>
                        <div class="attribute-item mb-3">
                            <span class="text-muted small">建筑面积：</span>
                            <span class="font-weight-medium">{{ house.area }}㎡</span>
                        </div>
                        <div class="attribute-item mb-3">
                            <span class="text-muted small">房屋朝向：</span>
                            <span class="font-weight-medium">{{ house.direction }}</span>
                        </div>
                    </div>

                    <!--右侧属性-->
                    <div class="col-md-6">
                        <div class="attribute-item mb-3">
                            <span class="text-muted small">所在区域：</span>
                            <span class="font-weight-medium">{{ house.address }}</span>
                        </div>
                        <div class="attribute-item mb-3">
                            <span class="text-muted small">租住类型：</span>
                            <span class="font-weight-medium">{{ house.rebt_type}}</span>
                        </div>
                        <div class="attribute-item mb-3">
                            <span class="text-muted small">房东电话：</span>
                            <span class="font-weight-medium text-primary">{{ house.phone_num }}</span>
                        </div>
                    </div>
                </div>

                <!--房屋卖点-->
                <div class="mt-4 pt-3 border-top">
                    <div class="attribute-item mb-3">
                        <span class="text-muted small">交通条件：</span>
                        <span class="font-weight-medium">{{ house.traffic | dealNone }}</span>
                    </div>
                    <div class="attribute-item">
                        <span class="text-muted small">房源亮点：</span>
                        <span class="font-weight-medium">{{ house.title }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!--配套设施-->
        <div class="card mb-4 border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h4 class="mb-0 font-weight-bold">配套设施</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for device in [('冰箱','fa-refrigerator'),('洗衣机','fa-washing-machine'),('电视','fa-tv'),('空调','fa-wind'),('暖气','fa-temperature-high')] %}
                    <div class="col-4 col-sm-2 text-center mb-4">
                        <div class="facility-icon">
                            <i class="fas {{ device[1] }} fa-2x {% if device[0] in house.facilities %}text-primary{% else %}text-muted{% endif %}"></i>
                        </div>
                        <span class="small {% if device[0] in house.facilities %}text-dark font-weight-medium{% else %}text-muted{% endif %}">
                            {% if device[0] in house.facilities %}
                                {{device[0]}}
                            {% else %}
                                <s>{{device[0]}}</s>
                            {% endif %}
                        </span>
                    </div>
                    {% endfor %}

                    {% for device in [('热水器','fa-water'),('天然气','fa-fire'),('床','fa-bed'),('Wi-Fi','fa-wifi'),('电梯','fa-elevator')] %}
                    <div class="col-4 col-sm-2 text-center mb-4">
                        <div class="facility-icon">
                            <i class="fas {{ device[1] }} fa-2x {% if device[0] in house.facilities %}text-primary{% else %}text-muted{% endif %}"></i>
                        </div>
                        <span class="small {% if device[0] in house.facilities %}text-dark font-weight-medium{% else %}text-muted{% endif %}">
                            {% if device[0] in house.facilities %}
                                {{device[0]}}
                            {% else %}
                                <s>{{device[0]}}</s>
                            {% endif %}
                        </span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!--推荐房源-->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h4 class="mb-0 font-weight-bold">推荐房源</h4>
                <p class="small text-muted mb-0">根据您的浏览习惯，推荐优质房源</p>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for recommend_house in recommend_houses %}
                    <div class="col-lg-6 col-md-6 mb-4">
                        <div class="recommend-card h-100 border rounded p-3 hover-shadow transition-all">
                            <a href="/house/{{ recommend_house.id }}" class="d-block mb-2">
                                <img class="img-fluid rounded" src="/static/img/house-bg1.jpg" alt="{{ recommend_house.address }}">
                            </a>
                            <div class="recommend-info">
                                <h5 class="font-weight-bold text-truncate">{{ recommend_house.title }}</h5>
                                <p class="text-muted small mb-2">
                                    <i class="fa fa-map-marker text-primary"></i>
                                    {{ recommend_house.address }}
                                </p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-muted small">{{ recommend_house.rooms }} · {{ recommend_house.area }}㎡</span>
                                    <span class="price font-weight-bold text-danger">￥{{ recommend_house.price }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                    {% if not recommend_houses %}
                    <div class="col-12 text-center py-4">
                        <i class="fa fa-search text-muted fa-3x mb-3"></i>
                        <p class="text-muted">暂无推荐房源</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
                    <!-- 修改后的右边栏部分 -->
<div class="col-lg-4 col-md-4">
    <div class="card row">
        <!-- 修改为户型价格走势图放在第一个 -->
        <div class="col-lg-12 col-md-12 mx-auto attribute-header">
            <h4><i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;&nbsp;{{ house.block }}户型价格走势</h4>
            <div class="attribute-header-tip-line">
                <span>实时追踪不同户型价格变化，把握市场动态</span>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
            <div id="broken_line"></div>
        </div>

        <!-- 修改为小区房源数量TOP20放在第二个 -->
        <div class="col-lg-12 col-md-12 mx-auto attribute-header">
            <h4><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;&nbsp;{{ house.block }}小区房源TOP20</h4>
            <div class="attribute-header-tip-line">
                <span>热门小区房源数量对比，了解区域供需情况</span>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
            <div id="scolumn_line"></div>
        </div>

        <!-- 修改为价格走势图放在第三个 -->
        <div class="col-lg-12 col-md-12 mx-auto attribute-header">
            <h4><i class="fa fa-area-chart" aria-hidden="true"></i>&nbsp;&nbsp;{{ house.block }}价格预测</h4>
            <div class="attribute-header-tip-line">
                <span>基于AI算法的价格预测，辅助决策参考</span>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
            <div id="f_line"></div>
        </div>

        <!-- 修改为户型占比图放在最后 -->
        <div class="col-lg-12 col-md-12 mx-auto attribute-header">
            <h4><i class="fa fa-pie-chart" aria-hidden="true"></i>&nbsp;&nbsp;{{ house.block }}户型分布</h4>
            <div class="attribute-header-tip-line">
                <span>区域户型比例分析，了解主流房型结构</span>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
            <div id="pie"></div>
        </div>
    </div>
</div>
                </div>
            </div>
        </div>

        <!--注册登录-->
        <div class="row info-line">
            <div class="col-lg-8 col-md-10 mx-auto">
                <!-- 注册窗口 -->
                <div id="register" class="modal fade login_form" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body m-header">
                                <button class="close" data-dismiss="modal">
                                    <span>×</span>
                                </button>
                            </div>
                            <div class="modal-title">
                                <h1 class="text-center">注册</h1>
                            </div>
                            <div class="modal-body">
                                <form class="form-group" id="registeform" action="http://127.0.0.1:5000/register" method="post">
                                    <div class="form-group">
                                        <label for="" class="form-info">用户名</label>
                                        <input class="form-control" name="username" type="text" placeholder="6-15位字母或数字">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">密码</label>
                                        <input class="form-control" name="password" type="password" placeholder="至少6位字母或数字">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">再次输入密码</label>
                                        <input class="form-control" name="confirmPassword" type="password" placeholder="至少6位字母或数字">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">邮箱</label>
                                        <input class="form-control" name="email" type="email" placeholder="例如:123@123.com">
                                    </div>
                                    <div class="text-right">
                                        <button class="btn btn-primary" id="registe-btn">提交</button>
                                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                    </div>
                                    <a href="http://127.0.0.1:5000/house/111872" data-toggle="modal" data-dismiss="modal" data-target="#login" class="switch-info">已有账号？点我登录</a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 登录窗口 -->
                <div id="login" class="modal fade login_form">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body m-header">
                                <button class="close" data-dismiss="modal">
                                    <span>×</span>
                                </button>
                            </div>
                            <div class="modal-title">
                                <h1 class="text-center">登录</h1>
                            </div>
                            <div class="modal-body">
                                <form class="form-group" id="loginform" action="http://127.0.0.1:5000/login" method="post">
                                    <div class="form-group">
                                        <label for="" class="form-info">用户名</label>
                                        <input class="form-control" name="username" type="text" placeholder="">
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="form-info">密码</label>
                                        <input class="form-control" name="password" type="password" placeholder="">
                                    </div>
                                    <div class="text-right">
                                        <button class="btn btn-primary" id="login-btn">登录</button>
                                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                    </div>
                                    <a href="http://127.0.0.1:5000/house/111872" data-toggle="modal" data-dismiss="modal" data-target="#register" class="switch-info">还没有账号？点我注册</a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
</header>

<hr>
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <!-- <p class="copyright text-muted">Copyright © 二手好房 2019</p> -->
            </div>
        </div>
    </div>
</footer>

<!-- Bootstrap core JavaScript -->
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/login.js"></script>
<!-- Custom scripts for this template -->
<script src="/static/js/clean-blog.min.js"></script>
<!-- side data -->
<script type="text/javascript" src="/static/vendor/echarts-stat/ecStat.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/infographic.js"></script>
<script src="/static/js/show_data_pie.js"></script>
<script src="/static/js/f_data.js"></script>
<script src="/static/js/show_column_data.js"></script>
<script src="/static/js/show_broken_line_data.js"></script>

<script>
$.ajax({
          url: "/get/scatterdata/{{ house.block }}",
          type: "get",
          dataType: "json",
          success: function (data) {
            getdata1(data["data"]);
          },
        });
$.ajax({
          url: "/get/brokenlinedata/{{ house.block }}",
          type: "get",
          dataType: "json",
          success: function (data) {
            broken_line_chart(data["data"]);
          },
        });
$.ajax({
            url: "/get/piedata/{{ house.block }}",
            type: 'get',
            dataType: 'json',
            success: function (data) {
                pie_chart(data['data'])
            }

        });
$.ajax({
            url: "/get/columndata/{{ house.block }}",
            type: 'get',
            dataType: 'json',
            success: function (data) {
                column_chart(data['data'])
            }
        });
// 修改后的broken_line_chart函数
function broken_line_chart(data) {
    var salaru_line = echarts.init(document.getElementById('broken_line'), 'infographic');
    window.addEventListener('resize', function () {
        salaru_line.resize();
    });

    var Data1 = data['3室2厅'];
    var Data2 = data['2室2厅'];
    var Data3 = data['2室1厅'];
    var Data4 = data['1室1厅'];

    var echartsDate = [];
    for (var i = 0; i < data['date_li'].length; i++) {
        echartsDate.push(data['date_li'][i]);
    }

    var option = {
        backgroundColor: '#f8f9fa',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.7)',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            data: ['3室2厅', '2室2厅', '2室1厅', '1室1厅'],
            textStyle: {
                color: '#555'
            },
            right: 10,
            top: 0
        },
        grid: {
            containLabel: true,
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            backgroundColor: '#fff',
            borderWidth: 0
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: echartsDate,
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            name: '价格(元/月)',
            nameLocation: 'center',
            nameGap: 30,
            nameTextStyle: {
                color: '#666',
                fontWeight: 'bold'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    color: '#eee',
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                name: '3室2厅',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 3,
                    color: '#0085A1'
                },
                itemStyle: {
                    color: '#0085A1',
                    borderWidth: 1,
                    borderColor: '#fff'
                },
                data: Data1
            },
            {
                name: '2室2厅',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 3,
                    color: '#e74c3c'
                },
                itemStyle: {
                    color: '#e74c3c',
                    borderWidth: 1,
                    borderColor: '#fff'
                },
                data: Data2
            },
            {
                name: '2室1厅',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 3,
                    color: '#2ecc71'
                },
                itemStyle: {
                    color: '#2ecc71',
                    borderWidth: 1,
                    borderColor: '#fff'
                },
                data: Data3
            },
            {
                name: '1室1厅',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 3,
                    color: '#f39c12'
                },
                itemStyle: {
                    color: '#f39c12',
                    borderWidth: 1,
                    borderColor: '#fff'
                },
                data: Data4
            }
        ]
    };
    salaru_line.setOption(option, true);
}

// 修改后的column_chart函数
function column_chart(data) {
    var salaru_line = echarts.init(document.getElementById('scolumn_line'));
    window.addEventListener('resize', function () {
        salaru_line.resize();
    });

    var XData = data['name_list_x'];
    var YData = data['num_list_y'];
    var dataMin = parseInt(Math.min.apply(null, YData) / 2);

    var option = {
        backgroundColor: '#f8f9fa',
        grid: {
            height: '200px',
            width: '320px',
            left: '50px',
            right: '20px',
            top: '40px',
            bottom: '30px'
        },
        xAxis: {
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            splitArea: {
                show: false
            },
            data: XData,
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                formatter: function (value) {
                    var ret = "";
                    var maxLength = 4;
                    var valLength = value.length;
                    var rowN = Math.ceil(valLength / maxLength);

                    if (rowN > 1) {
                        for (var i = 0; i < rowN; i++) {
                            var start = i * maxLength;
                            var end = start + maxLength;
                            ret += value.substring(start, end) + (i < rowN - 1 ? '\n' : '');
                        }
                        return ret;
                    } else {
                        return value;
                    }
                },
                interval: 0,
                fontSize: 10,
                color: '#666'
            }
        },
        yAxis: {
            name: '房源数量(套)',
            nameLocation: 'center',
            nameGap: 35,
            nameTextStyle: {
                color: '#666',
                fontWeight: 'bold'
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                    type: 'dashed'
                }
            },
            splitArea: {
                show: false
            },
            min: dataMin,
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.7)',
            textStyle: {
                color: '#fff'
            },
            formatter: '{b0}: {c0}套'
        },
        series: [{
            type: "bar",
            barWidth: '40%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#0085A1' },
                        { offset: 1, color: '#00a8ff' }
                    ]),
                    barBorderRadius: [4, 4, 0, 0],
                    shadowColor: 'rgba(0,0,0,0.1)',
                    shadowBlur: 5,
                    shadowOffsetY: 2
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#006685' },
                        { offset: 1, color: '#0085A1' }
                    ])
                }
            },
            data: YData,
            label: {
                show: true,
                position: 'top',
                fontSize: 10,
                color: '#555'
            }
        }]
    };
    salaru_line.setOption(option, true);
}

// 修改后的getdata1函数
function getdata1(data) {
    var center1 = echarts.init(document.getElementById('f_line'), 'infographic');
    window.addEventListener('resize', function () {
        center1.resize();
    });

    var myRegression = ecStat.regression('linear', data['data-predict']);
    myRegression.points.sort(function (a, b) {
        return a[0] - b[0];
    });

    var echartsDate = [];
    for (var i = 0; i < data['date_li'].length; i++) {
        echartsDate.push(data['date_li'][i]);
    }

    option = {
        backgroundColor: '#f8f9fa',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            backgroundColor: 'rgba(0,0,0,0.7)',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            show: true,
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '15%',
            backgroundColor: '#fff',
            borderWidth: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            splitLine: {
                lineStyle: {
                    color: '#eee',
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            },
            data: echartsDate
        },
        yAxis: {
            type: 'value',
            min: 1.5,
            name: '价格(元/月)',
            nameLocation: 'center',
            nameGap: 30,
            nameTextStyle: {
                color: '#666',
                fontWeight: 'bold'
            },
            splitLine: {
                lineStyle: {
                    color: '#eee',
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        series: [{
            name: '实际值',
            type: 'scatter',
            symbolSize: 8,
            itemStyle: {
                color: '#e74c3c',
                borderColor: '#fff',
                borderWidth: 1
            },
            label: {
                emphasis: {
                    show: true,
                    position: 'left',
                    textStyle: {
                        color: '#555',
                        fontSize: 12
                    }
                }
            },
            data: data['data-predict']
        }, {
            name: '预测值',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
                width: 3,
                color: '#0085A1'
            },
            data: myRegression.points,
            markPoint: {
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        formatter: myRegression.expression,
                        textStyle: {
                            color: '#555',
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [{
                    coord: myRegression.points[myRegression.points.length - 1]
                }]
            }
        }]
    };
    center1.setOption(option, true);
}

// 修改后的pie_chart函数
function pie_chart(data) {
    var myChart = echarts.init(document.getElementById('pie'));
    window.addEventListener('resize', function () {
        myChart.resize();
    });

    var option = {
        backgroundColor: '#f8f9fa',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            backgroundColor: 'rgba(0,0,0,0.7)',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            textStyle: {
                color: '#555'
            }
        },
        series: [{
            name: '户型分布',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 5,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}: {d}%',
                color: '#555'
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: data.map(function(item) {
                return {
                    value: item.value,
                    name: item.name,
                    itemStyle: {
                        color: getRandomColor()
                    }
                };
            })
        }]
    };

    function getRandomColor() {
        var colors = ['#0085A1', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#d35400'];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    myChart.setOption(option);
}
// 获取租房按钮和弹窗元素
const rentBtn = document.getElementById('rentbtn');
const modal = document.createElement('div');
modal.className = 'modal';
modal.id = 'rentModal';

// 创建弹窗内容
const modalContent = document.createElement('div');
modalContent.className = 'modal-content';
modalContent.innerHTML = `
    <div class="modal-header">
        <h3>房源信息确认</h3>
    </div>
    <div class="modal-body">
    <p><strong>地址：</strong> {{ house.address }}</p>
    <p><strong>户型：</strong> {{ house.rooms }}</p>
    <p><strong>价格：</strong> ￥{{ house.price }}/月</p>
    <p><strong>面积：</strong> {{ house.area }}㎡</p>
    <!-- 添加租赁时长输入框 -->
    <p>
        <label for="rentMonth">租赁时长(月)：</label>
        <input type="number" id="rentMonth" name="rentMonth" min="1" required style="width: 80px; padding: 5px;">
    </p>
</div>
<div class="modal-footer">
    <!-- 改为普通按钮并绑定点击事件 -->
    <button class="submit-btn" id="submitRent">提交申请</button>
    <button class="close-btn" id="closeBtn">关闭</button>
</div>
`;
modal.appendChild(modalContent);
document.body.appendChild(modal);

// 点击租房按钮显示弹窗
rentBtn.addEventListener('click', () => {
    console.log("小窗显示");
    modal.style.display = 'block';
});

// 关闭弹窗
document.getElementById('closeBtn').addEventListener('click', () => {
    modal.style.display = 'none';
});

// 点击空白处关闭弹窗
window.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
});

// 提交按钮跳转逻辑（需替换为实际接口或页面）
// document.getElementById('submitBtn').addEventListener('click', () => {
//     // 示例：跳转到租房申请页面
//     window.location.href = `/rent/apply/${{ house.id }}`;
//
//     // 隐藏弹窗
//     modal.style.display = 'none';
// });

// 获取提交按钮和租赁时长输入框
const submitRentBtn = document.getElementById('submitRent');
const rentMonthInput = document.getElementById('rentMonth');

submitRentBtn.addEventListener('click', async () => {
    // 校验输入
    const month = parseInt(rentMonthInput.value);
    if (!month || month < 1) {
        alert('请输入有效的租赁时长（至少1个月）');
        return;
    }

    // 构造请求数据
    const data = {
        username: '{{ request.cookies.get("username") }}', // 从Cookie获取用户名
        month: month,
        house_id: {{ house.id }} // 从模板获取房源ID
    };

    try {
        // 发送POST请求到/rent接口
        const response = await fetch('/user/rent', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        });

        const result = await response.json();
        if (result.valid === '1') {
            alert('租借成功！');
            modal.style.display = 'none'; // 关闭弹窗
            // 可选：刷新页面或跳转至个人中心
            window.location.href = '/user/{{ request.cookies.get("username") }}';
        } else {
            alert('租借失败：' + result.msg);
        }
    } catch (error) {
        console.error('请求失败：', error);
        alert('网络请求失败，请重试');
    }
});

// 获取收藏按钮元素
const collectBtn = document.getElementById('btn-collection');
const houseId = {{ house.id }}; // 从模板获取房源ID

// 初始化：检查用户是否已登录，并加载收藏状态（可选）
let isCollected = false; // 初始状态设为未收藏
const username = '{{ request.cookies.get("username") }}'; // 获取当前用户名

// 页面加载时检查收藏状态
document.addEventListener('DOMContentLoaded', async () => {
    // 如果用户已登录，请求收藏状态
    if (username) {
        try {
            const response = await fetch(`/user/check_collect?house_id=${houseId}`);
            const result = await response.json();

            if (result.valid === '1') {
                isCollected = result.is_collected;
                updateCollectButton(); // 更新按钮样式和文本
            }
        } catch (error) {
            console.error('获取收藏状态失败:', error);
        }
    }
});

// 更新收藏按钮的样式和文本
function updateCollectButton() {
    if (isCollected) {
        collectBtn.classList.add('collected'); // 添加已收藏样式
                collectBtn.querySelector('i').style.color = '#ff4444'; // 红色心形
                collectBtn.querySelector('i').textContent='已收藏';
    } else {
        collectBtn.classList.remove('collected'); // 移除已收藏样式
                collectBtn.querySelector('i').style.color = '#f1c40f'; // 恢复原色
                collectBtn.querySelector('i').textContent='收藏';
    }
}


// 点击事件处理函数
collectBtn.addEventListener('click', async () => {
    // 检查用户是否登录
    if (!username) {
        alert('请先登录');
        // 显示登录弹窗（如果有）
        $('#login').modal('show');
        return;
    }

    // 调用接口切换收藏状态
    try {
        let response;
        if (isCollected) {
            // 取消收藏
            response = await fetch('/user/collect_off', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    house_id: houseId,
                    username: username,
                }),
            });
        } else {
            // 收藏房源
            response = await fetch('/user/collect_on', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    house_id: houseId,
                    username: username,
                }),
            });
        }

        const result = await response.json();
        if (result.valid === '1') {
            // 切换收藏状态和图标样式
            isCollected = !isCollected;
            if (isCollected) {
                collectBtn.classList.add('collected'); // 添加已收藏样式
                collectBtn.querySelector('i').style.color = '#ff4444'; // 红色心形
                collectBtn.querySelector('i').textContent='已收藏';
                alert('收藏成功！');
            } else {
                collectBtn.classList.remove('collected'); // 移除已收藏样式
                collectBtn.querySelector('i').style.color = '#f1c40f'; // 恢复原色
                collectBtn.querySelector('i').textContent='收藏';
                alert('取消收藏成功！');
            }
        } else {
            alert(result.msg);
        }
    } catch (error) {
        console.error('请求失败：', error);
        alert('操作失败，请重试');
    }
});


</script>
</body></html>